<style lang="scss" scoped>
    .no-pointer{
        cursor:inherit !important;
    }
</style>
<template>
    <a class="ui label" :class="customClass">
        <i v-if="icon" :class="customIcon"></i>
        <span v-if="name">{{tagName}}</span>
        <slot v-else></slot>
    </a>
</template>
<script>
    export default {
        name: 'ui-tag',
        props: {
            name: {
                type: String,
                default: ''
            },
            icon: String,
            circular: Boolean,
            empty: Boolean,
            size: {
                type: String,
                default: 'mini'
            },
            color: {
                type: String,
                default: ''
            },
            pointer: Boolean
        },
        computed: {
            customClass() {

                return `${this.color} ${this.size} ${this.circular ? 'circular' : ''} ${this.empty ? 'empty circular' : ''} ${this.pointer ? '' : 'no-pointer'}`
            },
            customIcon() {
                return `${this.icon}`
            },
            tagName() {
                return this.empty ? '' : this.name
            }
        }
    }
</script>
